<template>
  <!-- 服务收藏 -->
  <div class="card">
    <div class="card-top">
      <div class="card-top-menu-active">服务收藏</div>
    </div>
    <el-divider />
    <div class="card-bottom">
      <div class="grid grid-cols-10 gap-[20px] pl-[40px] pr-[40px]">
        <div class="flex flex-col items-center">
          <img class="block w-[52px]" alt="Vue logo" src="~@/assets/img1.png" />
          <span class="text-[10px] mt-[10px]">物品领用</span>
        </div>
        <div class="flex flex-col items-center">
          <img class="block w-[52px]" alt="Vue logo" src="~@/assets/img2.png" />
          <span class="text-[10px] mt-[10px]">人事系统</span>
        </div>
        <div class="flex flex-col items-center">
          <img class="block w-[52px]" alt="Vue logo" src="~@/assets/img3.png" />
          <span class="text-[10px] mt-[10px]">安全中心</span>
        </div>
        <div class="flex flex-col items-center">
          <img class="block w-[52px]" alt="Vue logo" src="~@/assets/img1.png" />
          <span class="text-[10px] mt-[10px]">科研管理系统</span>
        </div>
        <div class="flex flex-col items-center">
          <img class="block w-[52px]" alt="Vue logo" src="~@/assets/img2.png" />
          <span class="text-[10px] mt-[10px]">学工大厅</span>
        </div>
        <div class="flex flex-col items-center">
          <img class="block w-[52px]" alt="Vue logo" src="~@/assets/img3.png" />
          <span class="text-[10px] mt-[10px]">人事系统</span>
        </div>
        <div class="flex flex-col items-center">
          <img class="block w-[52px]" alt="Vue logo" src="~@/assets/img1.png" />
          <span class="text-[10px] mt-[10px]">站群系统-外网</span>
        </div>
        <div class="flex flex-col items-center">
          <img class="block w-[52px]" alt="Vue logo" src="~@/assets/img2.png" />
          <span class="text-[10px] mt-[10px]">教务系统</span>
        </div>
        <div class="flex flex-col items-center">
          <img class="block w-[52px]" alt="Vue logo" src="~@/assets/img3.png" />
          <span class="text-[10px] mt-[10px]">OA系统</span>
        </div>
        <div class="flex flex-col items-center">
          <img class="block w-[52px]" alt="Vue logo" src="~@/assets/img1.png" />
          <span class="text-[10px] mt-[10px]">办事大厅</span>
        </div>
        <div class="flex flex-col items-center">
          <img class="block w-[52px]" alt="Vue logo" src="~@/assets/img2.png" />
          <span class="text-[10px] mt-[10px]">心理健康系统</span>
        </div>
        <div class="flex flex-col items-center">
          <img class="block w-[52px]" alt="Vue logo" src="~@/assets/img3.png" />
          <span class="text-[10px] mt-[10px]">迎新系统</span>
        </div>
        <div class="flex flex-col items-center">
          <van-icon size="24" name="plus" class="m-[14px]" />
          <span class="text-[10px] mt-[10px]">迎新系统</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts"></script>

<style lang="less" scoped></style>
